/* 选中页面内所有元素 */

* {
  /* 清除外边距 */
  margin: 0;
  /* 清除内边距 */
  padding: 0;
}

/* 选中页面内的<html>和<body>元素 */

html,
body {
  /* 高度设为100%像素 */
  height: 100%;
  overflow: hidden;
}

/* 选中页面内的<div class="clock-wrapper">元素 */

div.clock-wrapper {
  /* 宽度设为100%像素 */
  width: 100%;
  /* 高度设为100%像素 */
  height: 100%;
  /* 背景设为#eceef0颜色值 */
  background-color: #eceef0;
  /* 让子元素相对div.clock-wrapper元素进行定位 */
  position: relative;
}

/* 选中页面内的<div class="clock-border">元素 */

div.clock-border {
  /* 宽度设为460像素 */
  width: 460px;
  /* 高度设为460像素 */
  height: 460px;
  /* 边框设为18像素宽、实线线条和#d2d8df颜色值 */
  border: 18px solid #d2d8df;
  /* 清除顶部边框 */
  border-top-color: transparent;
  /* 设为50%像素圆角 */
  border-radius: 50%;
  /* 设为基于<div class="clock-wrapper">元素进行绝对定位 */
  position: absolute;
  /* 设为距离<div class="clock-wrapper">元素最上边有0像素 */
  top: 0;
  /* 设为距离<div class="clock-wrapper">元素最下边有0像素 */
  bottom: 0;
  /* 设为距离<div class="clock-wrapper">元素最左边有0像素 */
  left: 0;
  /* 设为距离<div class="clock-wrapper">元素最右边有0像素 */
  right: 0;
  /* 让上下左右方向的外边距自动调整 */
  margin: auto;
  /* X轴向左偏移50%像素，Y轴向上偏移50%像素，Z轴逆时针旋转45度 */
  transform: rotateZ(-45deg);
  animation: rotate-clock-border 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1
    forwards;
}

/* 选中页面内的<div class="clock">元素 */

div.clock {
  /* 宽度设为400像素 */
  width: 400px;
  /* 高度设为400像素 */
  height: 400px;
  /* 背景设为#262c33颜色值 */
  background-color: #262c33;
  /* 边框设为18像素宽、实线线条和#373f4a颜色值 */
  border: 18px solid #373f4a;
  /* 设为50%像素圆角 */
  border-radius: 50%;
  /* 设为基于<div class="clock-border">元素进行绝对定位 */
  position: absolute;
  /* 设为距离<div class="clock-border">元素最上边有0像素 */
  top: 0;
  /* 设为距离<div class="clock-border">元素最下边有0像素 */
  bottom: 0;
  /* 设为距离<div class="clock-border">元素最左边有0像素 */
  left: 0;
  /* 设为距离<div class="clock-border">元素最右边有0像素 */
  right: 0;
  /* 让上下左右方向的外边距自动调整 */
  margin: auto;
  /* Z轴顺时针旋转45度 */
  transform: rotateZ(45deg);
  animation: counterrotate-clock 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1
    forwards;
}

/* 选中页面内的<ul class="minute-marks">内部的<li>元素 */

ul.minute-marks li {
  /* 清除列表符号 */
  list-style-type: none;
  /* 宽度设为200像素 */
  width: 200px;
  /* 高度设为200像素 */
  height: 200px;
  /* 设为基于<div class="clock">元素进行绝对定位 */
  position: absolute;
  /* 设为距离<div class="clock">元素最上边有0像素 */
  top: 0;
  /* 设为距离<div class="clock">元素最下边有0像素 */
  bottom: 0;
  /* 设为距离<div class="clock">元素最左边有0像素 */
  left: 0;
  /* 设为距离<div class="clock">元素最右边有0像素 */
  right: 0;
  /* 让上下左右方向的外边距自动调整 */
  margin: auto;
}

ul.minute-marks li::before,
ul.minute-marks li::after {
  /* 设置before和after的内容 */
  content: "";
  /* 设为基于<li>元素进行绝对定位 */
  position: absolute;
  /* 设为距离<li>元素最上边有0像素 */
  top: 0;
  /* 设为距离<li>元素最下边有0像素 */
  bottom: 0;
  /* 设为距离<li>元素最左边有0像素 */
  left: 0;
  /* 设为距离<li>元素最右边有0像素 */
  right: 0;
  /* 让上下左右方向的外边距自动调整 */
  margin: auto;
  /* 宽度设为0像素 */
  width: 0;
  /* 高度设为0像素 */
  height: 0;
  /* 边框设为4像素宽、实线线条和#3d4d5d6颜色值 */
  border: 4px solid #d4d5d6;
  /* 设为50%像素圆角 */
  border-radius: 4px;
  animation: fade-in 0.1s ease 0s 1 forwards;
  opacity: 0;
}

ul.minute-marks li::before {
  top: -380px;
}

ul.minute-marks li::after {
  bottom: -380px;
}

/* 选中页面内的<ul class="minute-marks">内部的第2个<li>元素*/
ul.minute-marks li:nth-child(2) {
  /* Z轴旋转6度 */
  transform: rotateZ(6deg);
}

ul.minute-marks li:nth-child(3) {
  transform: rotateZ(12deg);
}

ul.minute-marks li:nth-child(4) {
  transform: rotateZ(18deg);
}

ul.minute-marks li:nth-child(5) {
  transform: rotateZ(24deg);
}

ul.minute-marks li:nth-child(6) {
  transform: rotateZ(30deg);
}

ul.minute-marks li:nth-child(7) {
  transform: rotateZ(36deg);
}

ul.minute-marks li:nth-child(8) {
  transform: rotateZ(42deg);
}

ul.minute-marks li:nth-child(9) {
  transform: rotateZ(48deg);
}

ul.minute-marks li:nth-child(10) {
  transform: rotateZ(54deg);
}

ul.minute-marks li:nth-child(11) {
  transform: rotateZ(60deg);
}

ul.minute-marks li:nth-child(12) {
  transform: rotateZ(66deg);
}

ul.minute-marks li:nth-child(13) {
  transform: rotateZ(72deg);
}

ul.minute-marks li:nth-child(14) {
  transform: rotateZ(78deg);
}

ul.minute-marks li:nth-child(15) {
  transform: rotateZ(84deg);
}

ul.minute-marks li:nth-child(16) {
  transform: rotateZ(90deg);
}

ul.minute-marks li:nth-child(17) {
  transform: rotateZ(96deg);
}

ul.minute-marks li:nth-child(18) {
  transform: rotateZ(102deg);
}

ul.minute-marks li:nth-child(19) {
  transform: rotateZ(108deg);
}

ul.minute-marks li:nth-child(20) {
  transform: rotateZ(114deg);
}

ul.minute-marks li:nth-child(21) {
  transform: rotateZ(120deg);
}

ul.minute-marks li:nth-child(22) {
  transform: rotateZ(126deg);
}

ul.minute-marks li:nth-child(23) {
  transform: rotateZ(132deg);
}

ul.minute-marks li:nth-child(24) {
  transform: rotateZ(138deg);
}

ul.minute-marks li:nth-child(25) {
  transform: rotateZ(144deg);
}

ul.minute-marks li:nth-child(26) {
  transform: rotateZ(150deg);
}

ul.minute-marks li:nth-child(27) {
  transform: rotateZ(156deg);
}

ul.minute-marks li:nth-child(28) {
  transform: rotateZ(162deg);
}

ul.minute-marks li:nth-child(29) {
  transform: rotateZ(168deg);
}

ul.minute-marks li:nth-child(30) {
  transform: rotateZ(174deg);
}

ul.minute-marks li.five::before,
ul.minute-marks li.five::after {
  height: 20px;
}

ul.minute-marks li.five::before {
  top: -360px;
}

ul.minute-marks li.five::after {
  bottom: -360px;
}

div.hour {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

div.hour::before {
  content: "";
  position: absolute;
  top: -120px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 16px;
  height: 120px;
  background-color: #fff;
}

div.hour::after {
  content: "";
  position: absolute;
  top: -256px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  border-bottom: 16px solid #ffffff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  width: 0px;
  height: 0px;
}

div.minute {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: rotateZ(20deg);
}

div.minute::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  top: -168px;
  width: 12px;
  height: 168px;
  background-color: #fff;
}

div.minute::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  top: -346px;
  border-bottom: 12px solid #ffffff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width: 0px;
  height: 0px;
}

div.second {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: rotateZ(-20deg);
}

div.second::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  top: -120px;
  width: 8px;
  height: 240px;
  background-color: #f16b41;
  border-radius: 8px;
}

div.second::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background-color: #f16b41;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.minute-marks li:nth-child(1)::before {
  animation-delay: 0.017s;
}

.minute-marks li:nth-child(2)::before {
  animation-delay: 0.034s;
}

.minute-marks li:nth-child(3)::before {
  animation-delay: 0.051s;
}

.minute-marks li:nth-child(4)::before {
  animation-delay: 0.068s;
}

.minute-marks li:nth-child(5)::before {
  animation-delay: 0.085s;
}

.minute-marks li:nth-child(6)::before {
  animation-delay: 0.102s;
}

.minute-marks li:nth-child(7)::before {
  animation-delay: 0.119s;
}

.minute-marks li:nth-child(8)::before {
  animation-delay: 0.136s;
}

.minute-marks li:nth-child(9)::before {
  animation-delay: 0.153s;
}

.minute-marks li:nth-child(10)::before {
  animation-delay: 0.17s;
}

.minute-marks li:nth-child(11)::before {
  animation-delay: 0.187s;
}

.minute-marks li:nth-child(12)::before {
  animation-delay: 0.204s;
}

.minute-marks li:nth-child(13)::before {
  animation-delay: 0.221s;
}

.minute-marks li:nth-child(14)::before {
  animation-delay: 0.238s;
}

.minute-marks li:nth-child(15)::before {
  animation-delay: 0.255s;
}

.minute-marks li:nth-child(16)::before {
  animation-delay: 0.272s;
}

.minute-marks li:nth-child(17)::before {
  animation-delay: 0.289s;
}

.minute-marks li:nth-child(18)::before {
  animation-delay: 0.306s;
}

.minute-marks li:nth-child(19)::before {
  animation-delay: 0.323s;
}

.minute-marks li:nth-child(20)::before {
  animation-delay: 0.34s;
}

.minute-marks li:nth-child(21)::before {
  animation-delay: 0.357s;
}

.minute-marks li:nth-child(22)::before {
  animation-delay: 0.374s;
}

.minute-marks li:nth-child(23)::before {
  animation-delay: 0.391s;
}

.minute-marks li:nth-child(24)::before {
  animation-delay: 0.408s;
}

.minute-marks li:nth-child(25)::before {
  animation-delay: 0.425s;
}

.minute-marks li:nth-child(26)::before {
  animation-delay: 0.442s;
}

.minute-marks li:nth-child(27)::before {
  animation-delay: 0.459s;
}

.minute-marks li:nth-child(28)::before {
  animation-delay: 0.476s;
}

.minute-marks li:nth-child(29)::before {
  animation-delay: 0.493s;
}

.minute-marks li:nth-child(30)::before {
  animation-delay: 0.51s;
}

.minute-marks li:nth-child(1)::after {
  animation-delay: 0.527s;
}

.minute-marks li:nth-child(2)::after {
  animation-delay: 0.544s;
}

.minute-marks li:nth-child(3)::after {
  animation-delay: 0.561s;
}

.minute-marks li:nth-child(4)::after {
  animation-delay: 0.578s;
}

.minute-marks li:nth-child(5)::after {
  animation-delay: 0.595s;
}

.minute-marks li:nth-child(6)::after {
  animation-delay: 0.612s;
}

.minute-marks li:nth-child(7)::after {
  animation-delay: 0.629s;
}

.minute-marks li:nth-child(8)::after {
  animation-delay: 0.646s;
}

.minute-marks li:nth-child(9)::after {
  animation-delay: 0.663s;
}

.minute-marks li:nth-child(10)::after {
  animation-delay: 0.68s;
}

.minute-marks li:nth-child(11)::after {
  animation-delay: 0.697s;
}

.minute-marks li:nth-child(12)::after {
  animation-delay: 0.714s;
}

.minute-marks li:nth-child(13)::after {
  animation-delay: 0.731s;
}

.minute-marks li:nth-child(14)::after {
  animation-delay: 0.748s;
}

.minute-marks li:nth-child(15)::after {
  animation-delay: 0.765s;
}

.minute-marks li:nth-child(16)::after {
  animation-delay: 0.782s;
}

.minute-marks li:nth-child(17)::after {
  animation-delay: 0.799s;
}

.minute-marks li:nth-child(18)::after {
  animation-delay: 0.816s;
}

.minute-marks li:nth-child(19)::after {
  animation-delay: 0.833s;
}

.minute-marks li:nth-child(20)::after {
  animation-delay: 0.85s;
}

.minute-marks li:nth-child(21)::after {
  animation-delay: 0.867s;
}

.minute-marks li:nth-child(22)::after {
  animation-delay: 0.884s;
}

.minute-marks li:nth-child(23)::after {
  animation-delay: 0.901s;
}

.minute-marks li:nth-child(24)::after {
  animation-delay: 0.918s;
}

.minute-marks li:nth-child(25)::after {
  animation-delay: 0.935s;
}

.minute-marks li:nth-child(26)::after {
  animation-delay: 0.952s;
}

.minute-marks li:nth-child(27)::after {
  animation-delay: 0.969s;
}

.minute-marks li:nth-child(28)::after {
  animation-delay: 0.986s;
}

.minute-marks li:nth-child(29)::after {
  animation-delay: 1.003s;
}

.minute-marks li:nth-child(30)::after {
  animation-delay: 1.02s;
}

@keyframes rotate-clock-border {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(315deg);
  }
}

@keyframes counterrotate-clock {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(-315deg);
  }
}
